import { HeaderComponent } from "./header.js"
import { requests } from "../utils/request.js"
import { loadingRef, createLoad, hideLoad } from "../utils/utils.js"

window.addEventListener('DOMContentLoaded', function () {
    const header = new HeaderComponent()
    const page = new HomePage(header)
    header.languageFn = page.createMain.bind(page)
    page.createMain()
})

class HomePage {
    static name = "home-page"
    #header = {}//header组件实例
    #homeOptions = null
    #loading = loadingRef(false, createLoad, hideLoad)//加载动画控制
    constructor(header) {
        this.#header = header
    }
    //获取配置数据
    #getOptions() {
        return requests.get(`/data/home/${this.#header.languageKey}.json`)
    }
    createMain() {
        this.#loading.value = true
        this.#getOptions().then(res => {
            this.#homeOptions = res.HOME_OPTIONS
            const box = document.getElementsByTagName("main")[0]
            const data = this.#homeOptions
            const content = `
            <section class="home-page-container">
                <h1 class="tagline">
                    <span class="accent">${data.name}</span>
                    <br />
                    <span class="accent-title">${data.title}</span>
                </h1>
                <p class="description"> ${data.introduction} </p>
                <p class="xdj-row xdj-flex-center">
                    <a class="get-started" href="./component.html">${data.linkText}</a>
                </p>
            </section>
            `
            if (box) {
                box.innerHTML = content
            } else {
                const main = document.createElement('main')
                main.innerHTML = content
                document.body.appendChild(main)
            }
            setTimeout(() => {
                this.#loading.value = false
            }, 1000)
        })


    }
}